<template>
  <!-- 商品列表 -->
  <div>
    <van-dropdown-menu>
      <van-dropdown-item title="综合" disabled />
      <van-dropdown-item
        title="价格"
        @change="changePrice"
        v-model="order"
        :options="priceOPtions"
      />
      <van-dropdown-item
        @change="changeCategory"
        title="分类"
        v-model="category"
        :options="categoryOptions"
      />
    </van-dropdown-menu>
      <ul class="goods" v-if="list.length !== 0">
        <li v-for="item in list" :key="item.id">
          <img v-lazy="item.list_pic_url" alt="" />
          <p>{{ item.name }}</p>
          <div class="price">{{ item.retail_price }}</div>
        </li>
      </ul>
      <van-empty v-else description="暂无商品" />
  </div>
</template>

<script>
export default {
  props: ['list', 'categoryOptions', 'categoryId'],
  name: 'commodity-list',
  data () {
    return {
      priceOPtions: [
        { text: '价格从低到高', value: 'asc' },
        { text: '价格从高到低', value: 'desc' }
      ],
      order: '',
      category: this.categoryId
    }
  },
  methods: {
    // 价格发生变化
    changePrice (val) {
      this.$emit('changePrice', val)
    },
    // 分类发生变化
    changeCategory (val) {
      this.$emit('changeCategory', val)
    }
  }
}
</script>

<style lang='less' scoped>
.goods {
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
  justify-content: space-between;
  padding: 0.1rem;
  width: 100%;
  background-color: #fff;
  li {
    width: 49%;
    background-color: #fff;
    text-align: center;
    margin-bottom: 0.1rem;
    padding-bottom: 0.1rem;
    img {
      width: 100%;
      display: block;
    }
    .price {
      color: darkred;
      margin-top: 0.05rem;
    }
    p {
      font: inherit;
      font-size: 0.14rem;
    }
  }
}
.van-empty__image img {
  width: 0;
  height: 0;
}
</style>
